<template>
	<div>
		<div class="own-upload-box">
			<el-upload class="avatar-uploader" :action="upFileUrl" :show-file-list="false" :on-success="handleSuccess" accept="image/*"
			 :before-upload="beforeUpload" :headers="headers">
				<img v-if="curImage" :src="curImage" class="avatar" />
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
			<div class="preview-btn-box">
				<el-button icon="el-icon-delete" circle size="mini" @click="deleteCur" style="margin-bottom: 3px;"
				v-if="!!curImage && !!hasDelBtn" key="delBtn"></el-button>
				<el-button icon="el-icon-search" circle size="mini" @click="openPreview"></el-button>
			</div>
			<div class="flex-grow" style="display:flex;align-items:flex-end;">
				<div style="line-height: 16px;font-size: 12px;"><slot></slot></div>
			</div>
		</div>
		<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="imageSrcList" :z-index="3000" />
	</div>
</template>

<script>
	import {
		getToken,
		getDoorToken
	} from '@/utils/auth'
	import {
		cloneDeep
	} from 'lodash'
	import {
		Message
	} from 'element-ui';
	import {
		upFileUrl
	} from "@/api/others";
	import ElImageViewer from 'element-ui/packages/image/src/image-viewer';

	export default {
		name: 'upload-image',
		components: {
			ElImageViewer
		},
		props: {
		  curImageProp: {
		    type: String,
		    default:''
		  },
		  ltSizeProp: {
		  	type: Number,
		  	default: 1
		  },
		  hasDelBtn: {
			  type: Boolean,
			  default: false
		  }
		},
		watch: {
			'curImageProp': {
				handler(n, o) {
					this.curImage = cloneDeep(n);
				}
			}
		},
		data() {
			return {
				showViewer: false,
				imageSrcList: [],
				upFileUrl,
				curImage: '',
				headers:{}
			}
		},
		created(){
			if (getToken()) {
				this.headers['Authorization'] = getToken()
			}
			if (getDoorToken()) {
				this.headers['DoorAuthorization'] = getDoorToken()
			}
		},
		mounted() {
			this.curImage = cloneDeep(this.curImageProp)
		},
		methods: {
			beforeUpload(file) {
				const isLtSize = file.size / 1024 / 1024 <= this.$props.ltSizeProp;
				if (!isLtSize) {
					Message.error('上传文件不能超过 ' + this.$props.ltSizeProp + 'MB!');
				}
				return isLtSize;
			},
			// 图片上传成功回调方法
			handleSuccess(res, file) {
				const _this = this
				if (res.code === 200) {
					_this.curImage = res.data;
					_this.$forceUpdate();
					Message.success('上传成功');
					_this.$emit('upload-success', res.data);
				} else {
					Message.error({
						message: res.message,
						duration: 5000
					});
				}
			},
			openPreview() {
				this.imageSrcList = [];
				this.imageSrcList.push(this.curImage);
				this.showViewer = true;
			},
			closeViewer() {
				this.showViewer = false;
				this.imageSrcList = [];
			},
			deleteCur(){
				this.curImage = '';
				this.$emit('upload-remove');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.own-upload-box {
		display: flex;
		height: 102px;


		.preview-btn-box {
			margin: 0 5px;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			flex-direction: column;
			
			/deep/.el-button.el-button--default.el-button--mini.is-circle{
				margin-left: 0 !important;
			}
		}

		&>>>.avatar-uploader {
			&>>>.el-upload {
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}

			&>>>.el-upload:hover {
				border-color: #409eff;
			}

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 100px !important;
				height: 100px !important;
				line-height: 100px !important;
				text-align: center;
			}

			.avatar {
				width: 100px !important;
				height: 100px !important;
				display: block;
				object-fit: contain;
			}
		}
	}
</style>
